<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="/assets/css/atom-one-light.css">
    
        <title>论制作 Slides 的几种姿势</title>
		<link rel="stylesheet" type="text/css" href="/assets/css/002.css">
    
	<link rel="stylesheet" href="/assets/css/font-awesome.min.css">
	<link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/x-icon">
	<link rel="icon" href="/assets/img/favicon.ico" type="image/x-icon">
	<script src="/assets/js/highlight.pack.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>

	

	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-140127665-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-140127665-1');
</script>


</head>
<body>
	<div class="wrapper">
		<div class="default_title">
			<img src="/assets/img/mycomputer.png" />
			
				<h1>NaNg's blog</h1>
			
		</div>
		<ul class="topbar">
	<a href="/pages/me.html"><li><u>A</u>bout</li></a>
	<a href="/pages/links.html"><li><u>L</u>inks</li></a>
	<a href="https://www.dropbox.com/sh/nhy3m3cvojizkk5/AABH8mt5gh3PiBrtWnCxE87ma?dl=0"><li><u>D</u>ropbox</li></a>
</ul>
		<div class="tag_list">
			<ul id="tag-list">
				<li><a href="/" ><img src="/assets/img/disk.png" />(C:)</a>
			<ul>
				
				
				<li><a href="/tag/3d/" title="3d"><img src="/assets/img/folder.ico" />3d</a></li>
				
				<li><a href="/tag/bioinformatics/" title="bioinformatics"><img src="/assets/img/folder.ico" />bioinformatics</a></li>
				
				<li><a href="/tag/notes/" title="notes"><img src="/assets/img/folder.ico" />notes</a></li>
				
				<li><a href="/tag/others/" title="others"><img src="/assets/img/folder.ico" />others</a></li>
				
				<li><a href="/tag/sci-fiction/" title="sci fiction"><img src="/assets/img/folder.ico" />sci fiction</a></li>
				
			</ul>
				</li>
			</ul>
		</div>
		<div class="post_list">
			
				<ul>
					
					<li>
						<a href="https://ani-net-project.gitee.io/index.html" title="AniNet">
								<img class="small-icon" src="/assets/img/aninet.png" title="AniNet" />AniNet
						</a>
					</li>
					
					<li>
						<a href="/examples/boids/index.html" title="Boids">
								<img class="small-icon" src="/assets/img/bird.png" title="Boids" />Boids
						</a>
					</li>
					
					<li>
						<a href="/examples/EM-alg/1_how_it_works.html" title="EM 算法 1. how it works">
								<img class="small-icon" src="/assets/img/notebook.ico" title="EM 算法 1. how it works" />EM 算法 1. how it works
						</a>
					</li>
					
					<li>
						<a href="/examples/pyvm/pyvm_ch0-3_cn.html" title="翻译：Inside Python Virtual Machine（前三章）">
								<img class="small-icon" src="/assets/img/html_ie.ico" title="翻译：Inside Python Virtual Machine（前三章）" />翻译：Inside Python Virtual Machine（前三章）
						</a>
					</li>
					
					<li>
						<a href="/20190624/cLife.html" title="器官工业幻想">
								<img class="small-icon" src="/assets/img/file.ico" title="器官工业幻想" />器官工业幻想
						</a>
					</li>
					
					<li>
						<a href="/examples/pubnet/Network_statistic.html" title="PubNet network statistic">
								<img class="small-icon" src="/assets/img/notebook.ico" title="PubNet network statistic" />PubNet network statistic
						</a>
					</li>
					
					<li>
						<a href="/examples/pubnet/sample.html" title="PubMed bio-conception network example">
								<img class="small-icon" src="/assets/img/net.png" title="PubMed bio-conception network example" />PubMed bio-conception network example
						</a>
					</li>
					
					<li>
						<a href="/examples/hpo_enrich/example_sagd_00055.html" title="HPO enrichment example">
								<img class="small-icon" src="/assets/img/notebook.ico" title="HPO enrichment example" />HPO enrichment example
						</a>
					</li>
					
					<li>
						<a href="/20190222/KS-Test.html" title="Two sample Kolmogorov-Smirnov test">
								<img class="small-icon" src="/assets/img/file.ico" title="Two sample Kolmogorov-Smirnov test" />Two sample Kolmogorov-Smirnov test
						</a>
					</li>
					
					<li>
						<a href="/20190220/threejs-test-page.html" title="three.js test page">
								<img class="small-icon" src="/assets/img/tree.png" title="three.js test page" />three.js test page
						</a>
					</li>
					
					<li>
						<a href="/20181111/hic_data_format.html" title="Hi-C 数据分析结果应该怎么存？">
								<img class="small-icon" src="/assets/img/file.ico" title="Hi-C 数据分析结果应该怎么存？" />Hi-C 数据分析结果应该怎么存？
						</a>
					</li>
					
					<li>
						<a href="/20181010/d3_bubble_chart.html" title="用 D3.js 画一个 bubble chart">
								<img class="small-icon" src="/assets/img/file.ico" title="用 D3.js 画一个 bubble chart" />用 D3.js 画一个 bubble chart
						</a>
					</li>
					
					<li>
						<a href="/20180724/new_kind_slides.html" title="论制作 Slides 的几种姿势">
								<img class="small-icon" src="/assets/img/file.ico" title="论制作 Slides 的几种姿势" />论制作 Slides 的几种姿势
						</a>
					</li>
					
					<li>
						<a href="/slides/test/slideshow.html" title="Markdown Slides Test">
								<img class="small-icon" src="/assets/img/slides.png" title="Markdown Slides Test" />Markdown Slides Test
						</a>
					</li>
					
					<li>
						<a href="/20180221/bioview.html" title="bioView - 一个生信常用文件格式的可读性增强工具">
								<img class="small-icon" src="/assets/img/file.ico" title="bioView - 一个生信常用文件格式的可读性增强工具" />bioView - 一个生信常用文件格式的可读性增强工具
						</a>
					</li>
					
					<li>
						<a href="/20170916/markdown-test-page.html" title="Markdown Test Page">
								<img class="small-icon" src="/assets/img/file.ico" title="Markdown Test Page" />Markdown Test Page
						</a>
					</li>
					
					<li>
						<a href="/20170831/gol-js.html" title="一个JS实现的生命游戏">
								<img class="small-icon" src="/assets/img/file.ico" title="一个JS实现的生命游戏" />一个JS实现的生命游戏
						</a>
					</li>
					
					<li>
						<a href="/20170831/parallel.html" title="这大概是程序串行改并行最简单粗暴的方法">
								<img class="small-icon" src="/assets/img/file.ico" title="这大概是程序串行改并行最简单粗暴的方法" />这大概是程序串行改并行最简单粗暴的方法
						</a>
					</li>
					
					<li>
						<a href="/20170730/learn-docker.html" title="学习Docker">
								<img class="small-icon" src="/assets/img/file.ico" title="学习Docker" />学习Docker
						</a>
					</li>
					
					<li>
						<a href="/20170530/learn-assemble.html" title="学习汇编语言">
								<img class="small-icon" src="/assets/img/file.ico" title="学习汇编语言" />学习汇编语言
						</a>
					</li>
					
					<li>
						<a href="/20170505/schoolnet.html" title="如何在非校园网环境下使用学校文献数据库">
								<img class="small-icon" src="/assets/img/file.ico" title="如何在非校园网环境下使用学校文献数据库" />如何在非校园网环境下使用学校文献数据库
						</a>
					</li>
					
					<li>
						<a href="/20170308/zerotier.html" title="使用ZeroTier搭建虚拟局域网">
								<img class="small-icon" src="/assets/img/file.ico" title="使用ZeroTier搭建虚拟局域网" />使用ZeroTier搭建虚拟局域网
						</a>
					</li>
					
					<li>
						<a href="/20161224/hy-in-brief.html" title="Python生态下的Lisp方言">
								<img class="small-icon" src="/assets/img/file.ico" title="Python生态下的Lisp方言" />Python生态下的Lisp方言
						</a>
					</li>
					
					<li>
						<a href="/20161210/scrapy_douban.html" title="使用Scrapy爬取豆瓣相册">
								<img class="small-icon" src="/assets/img/file.ico" title="使用Scrapy爬取豆瓣相册" />使用Scrapy爬取豆瓣相册
						</a>
					</li>
					
					<li>
						<a href="/20161115/speed_up_python.html" title="加速Python">
								<img class="small-icon" src="/assets/img/file.ico" title="加速Python" />加速Python
						</a>
					</li>
					
				</ul>
			
		</div>
		<div class="post_total">
			
				<div class="left">25 object(s)</div>
			
			<div class="right">&nbsp;</div>
		</div>
	</div>
	
        <div class="content">
			<div class="post_title">
				<img src="/assets/img/file.png" />
				<h1>论制作 Slides 的几种姿势</h1>
				<a href="/"><div class="btn"><span class="fa fa-times"></span></div></a>
				<div class="btn btn_max"><span class="fa fa-window-maximize"></span></div>
				<div class="btn"><span class="fa fa-window-minimize"></span></div>
			</div>
			<ul class="topbar">
				<li>July 24, 2018</li>
			</ul>
			<div class="post_content" style="max-height: 600px">
				<div class="post_content_inner">
        		<p>制作 Slides，第一个想到的当然是 PPT。PPT 做 Slides 是很方便，毕竟人家是专业软件，
但还是有不少缺点，首先它不方便传播，每次使用前都要把文件先传给别人。
还有，版本不兼容的问题就不多说了，痛处大家都懂。
(虽然可以转 PDF 来解决，但转出来的 PDF 总是莫名其妙的大…)　
还有就是这个东西的定位是大众化软件，方便操作是好，但是如果你要做一个系列化的好几百张的
那种 Slides，PPT 很难做到灵活的工程化地对项目进行管理，毕竟是闭源格式，不方便脚本操作。
而且，还无法展示很多具有交互特性的动态效果，比如你写了个 JS 动画，是很难在里面展示的，
只能放个 Link 进去，看的时候在打开。</p>

<p>当然，做 Slides 不是只有 PPT 这一种姿势。下面就谈一谈我了解到的其他几种。</p>

<!-- more -->

<h2 id="latex">LaTeX</h2>

<p>LaTeX 的 beamer　包可以在一定程度上解决 PPT 的问题，它最大的好处就是可以工程化管理，
可以像写代码那样组织一个 Slides 项目的文件结构，可以用脚本、LaTeX 模板来对文件进行操作。
LaTeX 是专业排版工具，特别是对于数学公式排版，不仅排出来的公式美观而且它的语法对于表达公式也
很方便，个人感觉比 PPT　里的公式编辑器要强出很多。但 LaTeX 的定位是传统的纸质媒介排版，
所以很难嵌入动态效果。所以对于比较规范化的学术 Slides 排版或者是公式比较多的时候用 LaTeX 
会比较好。</p>

<p>我一般用 VS code 做编辑器，配合 LaTeX Workshop 这个插件来使用，可以一边写一边查看效果，
体验还是挺不错的。</p>

<p><img src="/images/blog/beamer_example.png" alt="" height="80%" width="80%" /></p>

<h2 id="jupyter-notebook">Jupyter notebook</h2>

<p>我原来也不知道，其实 Jupyter notebook 还可以用来做 Slide，直到上次看 PyData 上的
<a href="https://www.youtube.com/watch?v=s0S6HFdPtlA">演讲</a>，
发现演讲者用的 Slides 好像有点像 Jupyter, 下去以后搜了一下才发现。
这简直太棒了，在 Jupyter 上做的分析上，加上一些文字说明和格式调整就能做成演讲用的 
Slides 真的是非常方便。对于上述说的问题几乎能完全解决，Jupyter nbconvert 可以把一个
notebook 直接输出成一个 HTML 可以直接 Host 在 GitPage 上，给别人展示的时候只要
优雅地点开一个网页就可以了，简直不能再酷了。而且对于 Jupyter 而言嵌入个 JS 什么的
压根不成问题，交互特性妥妥的。</p>

<p>而且输出网页的默认样式看着也挺好看，简单朴素（当然也可以自己用 CSS 修改样式）。
这里放一个<a href="https://ericmjl.github.io/bayesian-deep-learning-demystified/#/IntroductionSlide">例子</a>
，可以点进去看看。具体怎么用 Jupyter 制作 Slides 可以参考
<a href="https://medium.com/learning-machine-learning/present-your-data-science-projects-with-jupyter-slides-75f20735eb0f">这里</a>
。</p>

<h2 id="mathematica">Mathematica</h2>

<p>恩，既然 Jupyter notebook 都有这个功能，Mathematica 作为 notebook 的前辈肯定也是可以做
Slides 的，参考 Mma <a href="http://reference.wolfram.com/language/howto/CreateASlideShow.html">相关文档</a>。
Mma 里面的交互特性当然是非常强大的，可以说是高配版的 Jupyter 了，但好像不能转
成 HTML 文件 (如果可以请评论区打脸)，在线展示需要在客户端安装一个 1G 多的 CDF 插件，
虽然比较大，但这个插件几乎能展示所有 Mma 里面内置的功能，还是很强大的。
从这个角度来说 Mma 比 Jupyter 强大，但可能确实不如 Jupyter 灵活。</p>

<h2 id="markdown-to-slides">Markdown to slides</h2>

<p>最近还发现了一种更加轻量级的解决方案，
<a href="https://github.com/partageit/markdown-to-slides">markdown-to-slides</a> 
能够直接把 Markdown 文件转换成 HTML 格式的 Slides。当然只要能生成 HTML
直接部署、CSS修改格式、以及嵌入 JS 代码都是不成问题的。如果不需要展示 
代码的运行，它可能比 Jupyter 还要方便一些。这里非常推荐，只是这个项目似乎
没有在维护，不过暂时功能还够用，到时候实在不行就只能自己开发了，
它是对另一个项目 <a href="https://github.com/gnab/remark">remark</a>　
的包装，remark 还在维护，所以应该是不用太发愁的。所以，这里比较推荐。</p>

<p>最后放一个我自己做的<a href="/slides/test/slideshow.html">例子</a>。</p>


				
					<br>
<hr>
<br>
<div class="donate">
	<p>Email: nanguage@yahoo.com</p>
</div>
				
				</div>
			</div>
		</div>
    
	<script src="/assets/js/001.js"></script>
	<script src="/assets/js/002.js"></script>
	<div class="footer">
		<p>blog theme: <a href="https://github.com/h01000110/windows-95">win95</a></p>
	</div>
</body>
</html>